<template>
  <div>
    <!-- ----------------------查询操作-------------------- -->
    <el-card>
      <div slot="header" class="clearfix">
        <el-form :inline="true" :model="query">
          <el-form-item>
            <el-input
              v-model="query.nickName"
              placeholder="请输入昵称"
              :clearable="true"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="query.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始注册日期"
              end-placeholder="结束注册日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="loadUsers"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <!-- ----------------------显示所有数据-------------------- -->
      <el-table :data="userList" border style="width: 100%"
      :cell-style="{'text-align':'center'}"
    :header-cell-style="{'text-align':'center'}">
        <el-table-column prop="userName" label="用户名"> </el-table-column>
        <el-table-column prop="nickName" label="昵称"> </el-table-column>
        <el-table-column prop="creatTime" label="生日"> </el-table-column>
        <el-table-column prop="tel" label="手机号"> </el-table-column>
        <el-table-column label="头像" show-overflow-tooltip>
          <template slot-scope="scope">
            <img :src="scope.row.headImg" style="width: 60px; height: 60px" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="small"
              v-if="scope.row.status == 0 ? false : true"
              @click="handleEdit(scope.row.userId)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="small"
              icon="el-icon-user-solid"
              @click="assignRole(scope.row.userId)"
              v-if="scope.row.status == 0 ? false : true"
              >分配角色</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="
                changeStatus({
                  userId: scope.row.userId,
                  status: scope.row.status == true ? 0 : 1,
                  userName: scope.row.userName
                })
              "
            >
            </el-switch>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.currentPage"
        :page-sizes="pageInfo.pageSizes"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
      >
      </el-pagination>
    </el-card>

    <!-- -------------------修改dialog---------------------- -->
    <el-dialog title="修改用户" :visible.sync="dialog.updateShow" width="30%">
      <el-form :model="updateForm" :rules="rules" status-icon ref="pwdForm">
        <el-form-item label="用户名" :label-width="formLabelWidth" prop="userName">
          <el-input
            v-model="updateForm.userName"
            autocomplete="off"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="昵称" :label-width="formLabelWidth" prop="nickName">
          <el-input
            v-model="updateForm.nickName"
            autocomplete="off"
            placeholder="请输入昵称"
          ></el-input>
        </el-form-item>
        <el-form-item label="生日" :label-width="formLabelWidth">
          <el-date-picker
            v-model="updateForm.creatTime"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="id" :label-width="formLabelWidth" hidden>
          <el-input v-model="updateForm.id"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.updateShow = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
    <!-- -------------------给用户授角色dialog---------------------- -->
    <el-dialog
      title="授权角色"
      :visible.sync="dialog.assignRoleShow"
      width="50%"
    >
      <el-checkbox-group v-model="checkList">
        <el-checkbox
          v-for="item in roleList"
          :key="item.roleId"
          :label="item.roleId"
          v-model="checkList"
          border
          size="medium"
          >{{ item.roleName }}
        </el-checkbox>
      </el-checkbox-group>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.assignRoleShow = false">取 消</el-button>
        <el-button type="primary" @click="assignNewRole">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uid: 0,
      roleList: [],
      checkList: [],
      formLabelWidth: "120px",
      updateForm: {},
      dialog: {
        assignRoleShow: false,
        addShow: false,
        updateShow: false
      },
      pageInfo: {
        pageSizes: [5, 10, 30, 50],
        total: 0
      },
      query: {
        userName: "",
        currentPage: 1,
        pageSize: 5,
        nickName: "",
        dateRange: []
      },
      userList: [],
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" }
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change"
          }
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change"
          }
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" }
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }]
      }
    };
  },
  methods: {
    changeStatus(us) {
      this.$axios.put("/users", us).then(res => {
        if (res.data.code == 200) {
          this.$notify({
            title: "成功",
            message: "状态已更新",
            type: "success"
          });
        } else {
          this.$notify.error({
            title: "错误",
            message: "更新失败，请重试"
          });
        }
      });
    },
    assignNewRole() {
      this.$axios
        .put("roles", { userId: this.uid, roleIds: this.checkList })
        .then(res => {
          if (res.data.code == 200) {
            this.$message.success(res.data.message);
            this.dialog.assignRoleShow = false;
          } else {
            this.$message.error(res.data.message);
          }
        });
    },
    assignRole(uid) {
      this.uid = uid;
      this.dialog.assignRoleShow = true;
      this.$axios.get("roles/queryByUid/" + uid).then(res => {
        this.roleList = res.data.data.roleList;
        this.checkList = res.data.data.checkList;
      });
    },
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.loadUsers();
    },
    handleCurrentChange(val) {
      this.query.currentPage = val;
      this.loadUsers();
    },
    loadUsers() {
      this.$axios.post("users/queryAll", this.query).then(res => {
        this.userList = res.data.data.list; //当前页的数据
        this.pageInfo.total = res.data.data.total; //满足条件的总条数
        this.userList.forEach(element => {
          element.status = element.status == 0 ? true : false;
        });
      });
    },

    handleEdit(id) {
      this.$axios.post("users/queryInfo", {
        "userId":id
      }).then((res) => {
        this.dialog.updateShow = true;
        this.updateForm = res.data.data.user;
      });
    },
    update() {
      this.$axios.put("users", this.updateForm).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.message);
          this.dialog.updateShow = false; //关闭dialog
          this.loadUsers();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    handleDelete(id) {
      this.$axios.delete("users/" + id).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.message);
          this.loadUsers();
        } else {
          this.$message.error(res.data.message);
        }
      });
    }
  },
  mounted() {
    this.loadUsers();
  }
};
</script>
